<template>
  <div>
    <el-card style="width: 50%">
      <el-form :model="user" label-width="100px" style="padding-right: 50px">
        <div style="margin: 15px; text-align: center">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/files/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="user.avatar" :src="user.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form-item label="账号" prop="username">
          <el-input v-model="user.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="user.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="info">
          <el-input v-model="user.info" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item  label="地址" prop="address">
          <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions">
          </el-cascader>
          <el-input
              placeholder = "请输入详细地址"
              v-model = "detailAddress"
              size="big"
              type="input" style="width: 200px;" ></el-input>
<!--          <el-input type="textarea" v-model="user.address" placeholder="地址"></el-input>-->
        </el-form-item>
        <el-form-item label="营业时间" prop="timeRange">
          <el-time-picker
              v-model="timeStart"
              value-format="hh:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
          <el-time-picker
              v-model="timeEnd"
              value-format="HH:mm:ss"
              placeholder="结束时间">
          </el-time-picker>
<!--          <button @click="show()">show</button>-->
<!--          <el-input v-model="user.timeRange" placeholder="营业时间"></el-input>-->
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select style="width: 100%" v-model="user.type">
            <el-option v-for="item in ['奶茶蛋糕', '轻食水果', '炸鸡汉堡', '特色美味']" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
              :action="$baseUrl + '/files/upload'"
              :headers="{ token: user.token }"
              list-type="picture"
              :on-success="handleLicenseSuccess"
          >
            <el-button type="primary">上传营业执照</el-button>
          </el-upload>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

export default {
  name: "AdminPerson",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      //地址数据存储
      pcaTextArr,
      selectedOptions: [],
      timeStart:"",
      timeEnd:"",
      detailAddress:""
    }
  },
  created() {
      //数据的初始化
      this.timeStart = this.user.timeRange.slice(0,8)
      this.timeEnd = this.user.timeRange.slice(-8)
      this.selectedOptions = this.user.address.split(",")
      this.detailAddress = this.selectedOptions.pop()
  },
  methods: {
    handleLicenseSuccess(response, file, fileList) {
      this.user.license = response.data
    },
    update() {
      // 保存当前的用户信息到数据库
      this.user.timeRange = this.timeStart + "-" + this.timeEnd
      this.user.address = this.selectedOptions.toString() + ',' + this.detailAddress
      this.$request.put('/business/update', this.user).then(res => {
        if (res.code === '200') {
          // 成功更新
          this.$message.success('保存成功')

          // 更新浏览器缓存里的用户信息
          localStorage.setItem('xm-user', JSON.stringify(this.user))

          // 触发父级的数据更新  头像的跟新
          this.$emit('update:user')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.user, 'avatar', response.data)
    },
    // show(){
    //   alert(this.user.timeRange)
    // }
  }
}
</script>

<style scoped>
/deep/.el-form-item__label {
  font-weight: bold;
}
/deep/.el-upload {
  border-radius: 50%;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}

</style>